<template>
	<view class="chooseInterests-page">
		<view class="top">
			<!-- <image src="../../static/img/icon12.png" mode=""></image> -->
			<text class="top-text">选择兴趣</text>
		</view>
		<view class="chooseInterests-page-box">
			<view class="chooseInterests-page-main" v-for="(item,index) in chooseList" :key="index">
				<view class="chooseInterests-page-main-title"><text class="_title-text _title-text-a">{{item.name}}</text></view>
				<view class="chooseInterests-page-main-box">
					<view class="tags-box">
						<view class="tag-item" v-for="(c,d) in item.list" :key="d" :class="chooseArr.indexOf(c.name) != -1 ?'tag-item-active tag-item-active-a':''" @tap="chooseItem" :data-name="c.name"><text class="tag-item-text">{{c.name}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="tab-options">
			<view class="_option-item _option-item-a" @tap="confirm"><text class="_option-item-text">跳过</text></view>
			<view class="_option-item _option-item-b" @tap="confirm"><text class="_option-item-text">完成</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseArr:[],
        //兴趣列表
        chooseList:[
          {
            name:'运动类',
            list:[
              {name:'足球'},
              {name:'蓝球'},
              {name:'乒乓球'},
              {name:'羽毛球'},
              {name:'桌球'},
              {name:'台球'},
              {name:'跑步'},
              {name:'健身'},
              {name:'跳绳'},
            ]
          },
          {
            name:'娱乐类',
            list:[

              {name:'听歌'},
              {name:'看电影'},
              {name:'看戏剧'},
              {name:'玩扑克'},
              {name:'唱歌'},
              {name:'桌游'},
              {name:'明星'},
              {name:'杂志'},

            ]
          },
          {
            name:'冒险类',
            list:[
              {name:'登山'},
              {name:'蹦极'},
              {name:'摩天轮'},
              {name:'滑雪'},
              {name:'溜冰'},
              {name:'跳伞'},
              {name:'攀岩'},
              {name:'野外探险'},
            ]
          }
        ]
			};
		},
		onLoad() {

		},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
		methods:{
			chooseItem(e) {
				let name = e.currentTarget.dataset.name;
				let _arr = [];
				if (this.chooseArr.indexOf(name)<0) {
					this.chooseArr.push(name)
				} else {
					_arr = this.chooseArr.filter(item => item != name)
					this.chooseArr = _arr;
				}
			},
			confirm() {
				if (this.chooseArr.length<1) {
					uni.showToast({
						title:'请先选择兴趣',
						icon:'none'
					})
					return false;
				}
				uni.navigateTo({
					url:'/pages/interestActivity/interestActivity'
				})
			}
		}
	}
</script>

<style lang="scss">
	.chooseInterests-page{
		width: 100%;
		.top{
			height:100rpx;
			padding:0 30rpx;
			background-color: #007AFF;
			text-align: center;
			line-height: 100rpx;
			image{
				width:22rpx;
				height:40rpx;
			}
			.top-text{
				color:#fff;
				font-size:30rpx;
			}
		}
		.chooseInterests-page-box{
			width: 100%;
			padding-bottom: 200rpx;
		}
		.chooseInterests-page-main{
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			.chooseInterests-page-main-title{
				._title-text{
					// border-left: 6rpx solid #0071fc;
					padding-left: 10rpx;
					font-size: 32rpx;
					color: #333333;
					letter-spacing: 2rpx;
				}
				._title-text-a{
					border-left: 6rpx solid rgba(76,217,100,1);
				}
				._title-text-b{
					border-left: 6rpx solid rgba(240,173,78,1);
				}
				._title-text-c{
					border-left: 6rpx solid rgba(221,82,77,1);
				}
			}
			.chooseInterests-page-main-box{
				width: 100%;
				padding: 30rpx;
				border-radius: 10rpx;
				box-shadow: 0px 9rpx 21rpx 3rpx rgba(99, 99, 99, 0.23);
				margin-top: 30rpx;
				box-sizing: border-box;
				.tags-box{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					.tag-item{
						display: inline-block;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 1.42;
						position: relative;
						display: inline-block;
						margin-bottom: 0;
						padding: 12rpx 24rpx;
						cursor: pointer;
						-webkit-transition: all;
						transition: all;
						-webkit-transition-timing-function: linear;
						transition-timing-function: linear;
						-webkit-transition-duration: .2s;
						transition-duration: .2s;
						text-align: center;
						vertical-align: top;
						white-space: nowrap;
						color: #333;
						border: 1px solid #ccc;
						border-radius: 6rpx;
						border-top-left-radius: 6rpx;
						border-top-right-radius: 6rpx;
						border-bottom-right-radius: 6rpx;
						border-bottom-left-radius: 6rpx;
						background-color: #fff;
						background-clip: padding-box;
						margin: 0rpx 0 20rpx 20rpx;
						.tag-item-text{

						}
					}
					.tag-item-active{
						// background: rgba(0,122,255,1);
						color: #fff;
						// border: 1px solid rgba(0,122,255,1);
					}
					.tag-item-active-a{
						background: rgba(76,217,100,1);
						border: 1px solid rgba(76,217,100,1);
					}
					.tag-item-active-b{
						background: rgba(240,173,78,1);
						border: 1px solid rgba(240,173,78,1);
					}
					.tag-item-active-c{
						background: rgba(221,82,77,1);
						border: 1px solid rgba(221,82,77,1);
					}
				}
			}
		}
		.tab-options{
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			z-index: 1;
			border-top: solid 2px rgba(200,200,200,0.1);
			background-color: #fff;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			._option-item{
				width: 50%;
				height: 100%;
				font-size: 30rpx;
				text-align: center;
				line-height: 100rpx;
			}
			._option-item-a{
				color: rgba(0,122,255,1);
			}
			._option-item-b{
				color: #fff;
				background-color: rgba(0,122,255,1);
			}
		}
	}
</style>
